<template>
  <view class="orders">
    <view class="tabs">
        <u-tabs
            :list="tabsList" 
            :current="currentTabs" 
            lineWidth="18" 
            lineColor="#3478F3"
            :activeStyle="{ color: '#3478F3' }" 
            :inactiveStyle="{ color: '#999999' }" 
            @click="tabsClick">
        </u-tabs>
    </view>
    <view class="main" v-if="currentTabs == 0">
        <view class="orders-tab">
            <view class="every-list">
                <text>订单编号</text>
                <text>{{ judgeNull(Info.NO) }}</text>
            </view>
            <view class="every-list">
                <text>联系人</text>
                <text>{{ judgeNull(Info.LINKPERSON) }}</text>
            </view>
            <view class="every-list">
                <text>联系电话</text>
                <text>{{ judgeNull(Info.LINKPERSONPHONE) }}</text>
            </view>
            <view class="every-list">
                <text>电子邮箱</text>
                <text>{{ judgeNull(Info.LINKPERSONEMAIL) }}</text>
            </view>
            <view class="every-list">
                <text>委托方</text>
                <text>{{ judgeNull(Info.CLIENTNAME) }}</text>
            </view>
            <view class="every-list">
                <text>服务商</text>
                <text>{{ judgeNull(Info.SUPPLIERNAME) }}</text>
            </view>
            <view class="every-list">
                <text>创建时间</text>
                <text>{{ formatterDate(Info.CREATED) }}</text>
            </view>
            <view v-if="OrderType !== 'F'" class="trace_button">
                <view @click="goRouter('/pagesA/user/orderTracker', Info.NO)">订单跟踪</view>
            </view>
        </view>
    </view>
    <view class="main" v-if="currentTabs == 1">
        <view class="goods-tab" v-show="Goods.length > 0">
            <view class="every-list" v-for="(item, index) in Goods" :key="index">
                <view class="list-detail">
                    <view class="every-side">
                        <view class="side-layer">
                            <view>货物名称</view>
                            <view>{{ judgeNull(item.NAME) }}</view>
                        </view>
                        <view class="side-layer">
                            <view>包装</view>
                            <view>{{ judgeNull(item.PACKAGETYPE) }}</view>
                        </view>
                        <view class="side-layer">
                            <view>毛重(kg)</view>
                            <view>{{ item.GROSSWEIGHT ? item.GROSSWEIGHT : '0' }}kg</view>
                        </view>
                        <view class="side-layer">
                            <view>危险品</view>
                            <view>{{ judgeNull(item.ISDANGER) }}</view>
                        </view>
                        <view class="side-layer" v-if="item.ISDANGER === '是'">
                            <view>危险品等级</view>
                            <view>{{ judgeNull(item.RISK_GRADE) }}</view>
                        </view>
                        <view class="side-layer" v-if="item.ISDANGER === '是'">
                            <view>联合国编号</view>
                            <view>{{ judgeNull(item.UNNUMBER) }}</view>
                        </view>
                        <view class="side-layer">
                            <view>投保</view>
                            <view>{{ judgeNull(item.INSURE) }}</view>
                        </view>
                    </view>
                    <view class="every-side">
                        <view class="side-layer">
                            <view>HSCODE</view>
                            <view>{{ judgeNull(item.HSCODE) }}</view>
                        </view>
                        <view class="side-layer">
                            <view>件数(件)</view>
                            <view>{{ formatterPack(item.PACKAGENUM) + '件' }}</view>
                        </view>
                        <view class="side-layer">
                            <view>体积(m³)</view>
                            <view>{{ judgeNull(item.VOLUME) + 'm³' }}</view>
                        </view>
                        <view class="side-layer">
                            <view>冷藏品</view>
                            <view>{{ judgeNull(item.ISCOLD) }}</view>
                        </view>
                        <view class="side-layer" v-if="item.ISCOLD === '是'">
                            <view>最低温度</view>
                            <view>{{ judgeNull(item.TEMPERATURE_MIN) }}</view>
                        </view>
                        <view class="side-layer" v-if="item.ISCOLD === '是'">
                            <view>最高温度</view>
                            <view>{{ judgeNull(item.TEMPERATURE_MAX) }}</view>
                        </view>            
                    </view>
                </view>
                <view class="division-line" v-show="index !== (Goods.length - 1)"></view>
            </view>
        </view>
    </view>
    <view class="main" v-if="currentTabs == 2">
        <view class="transport-tab">
            <view class="item-route">
                <view class="route-start"><text>{{ cutCityString(Detail.STARTPLACE, '-') }}</text></view>
                <view class="route-icon"><image src="@/static/images/user/portArrow.png" alt=""></view>
                <view class="route-end">{{ cutCityString(Detail.ENDPLACE, '-') }}</view>
            </view>
            <view class="item-special">
                <view class="special-every">
                    <text>贸易类型</text>
                    <text>{{ judgeNull(Detail.TRADETYPENAME) }}</text>
                </view>
                <view class="special-every">
                    <text>作业时长</text>
                    <text>{{ judgeNull(Detail.DAY) + '天' }}</text>
                </view>
            </view>
            <view class="item-special">
                <view class="item-left">箱型箱量</view>
                <view class="item-right">
                    <text>
                        {{ '20GP*' + (Detail.OSL_20GP_COUNT ? Detail.OSL_20GP_COUNT : '0') + '  ' }}{{ '40GP*' + (Detail.OSL_40GP_COUNT ? Detail.OSL_40GP_COUNT : '0') + '  ' }}{{ '40HQ*' + (Detail.OSL_40HQ_COUNT ? Detail.OSL_40HQ_COUNT : '0') }}
                    </text>
                </view>
            </view>
            <view class="item-special">
                <view class="item-left">提货方式</view>
                <view class="item-right">
                    <text>{{ Detail.PICKUPGOODSWAY === 'O' ? '上门提货' : '起始港交货' }}</text>
                </view>
            </view>
            <view class="item-special">
                <view class="item-left">提货地详细地址</view>
                <view class="item-right">
                    <text>{{ judgeNull(Detail.STARTADDRESS) }}</text>
                </view>
            </view>
            <view class="item-special">
                <view class="item-left">送货方式</view>
                <view class="item-right">
                    <text>{{ Detail.DELIVERYWAY === 'O' ? '送货上门' : '目的港交货' }}</text>
                </view>
            </view>
            <view class="item-special">
                <view class="item-left">送货地详细地址</view>
                <view class="item-right">
                    <text>{{ judgeNull(Detail.ENDADDRESS) }}</text>
                </view>
            </view>
            <view class="item-special">
                <view class="item-left">报关服务</view>
                <view class="item-right">
                    <text>{{ customsJudge(Detail.ISBGFW) }}</text>
                </view>
            </view>  
            <view class="item-special">
                <view class="item-left">发货人信息</view>
                <view class="item-right">
                    <text>{{ judgeNull(Detail.SHIPPER_MESSAGE) }}</text>
                </view>
            </view>
            <view class="item-special">
                <view class="item-left">收货人信息</view>
                <view class="item-right">
                    <text>{{ judgeNull(Detail.CONSIGNEE_MESSAGE) }}</text>
                </view>
            </view>
            <view class="item-special">
                <view class="item-left">通知人信息</view>
                <view class="item-right">
                    <text>{{ judgeNull(Detail.NOTOIFYPARTTY_MESSAGE) }}</text>
                </view>
            </view>
        </view>
    </view>
  </view>
</template>

<script>
import { GetWorkOrdersDetails } from "@/request/api.js";
import { hasPermission } from "@/utils/storage.js"; // //引入混入的文件
import { FormatterDate } from "@/utils/utils.js";

export default {
    data() {
        return {
            uuid: '',
            OrderType: '',
            currentTabs: 0, // 当前选中标签的索引
            Info: {
                CREATED: ''
            },
            Goods: [],
            Detail: {},
            tabsList: [
                {
                    name: '订单详情',
                },
                {
                    name: '货物信息',
                },
                {
                    name: '运输信息',
                }
            ]
        }
    },
    created() {
        hasPermission(); //路由鉴权
    },
    onLoad(option) {
        this.uuid = option.uuid
        this.OrderType = option.OrderType
    },
    mounted() {
      this.detailQuery()
    },
    methods: {
        // 详情接口
        async detailQuery() {
            let res = await GetWorkOrdersDetails({
                OrderType: this.OrderType,
                uuid: this.uuid
            })
            if(res.code == 200) {
                this.Info = res.data.Info
                this.Goods = res.data.Goods
                this.Detail = res.data.Detail
            }
        },
        // 点击标签时触发
        tabsClick(val) {
            this.currentTabs = val.index;
        },
        judgeNull(infor) {
            return infor ? infor : ''
        },
        formatterPack(num) {
            if(num){
                let index = num.lastIndexOf('.')
                if(index == -1){
                    return num
                }else{
                    return num.slice(0, index)
                }
            }else{
                return '0'
            }
        },
        customsJudge(ENDADDRESS) {
            return ENDADDRESS ? ENDADDRESS : '否'
        },
        formatterDate(CREATED) {
            if(CREATED){
                return FormatterDate(this.judgeNull(CREATED))
            }else{
                return ''
            }
        },
        cutCityString(city, format) {
            if(city){
                let index = city.lastIndexOf(format)
                if(index == -1) {
                    return city
                }else{
                    return city.slice(index + 1)
                }
            }else{
                return ''
            }
        },
        goRouter(url, orderno) {
            uni.navigateTo({
                url: url + '?orderno=' + orderno
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.orders {
    width: 100%;
    min-height: 100vh;
    background-color: #f2f8ff;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    .tabs {
        ::v-deep .u-tabs {
            height: 100rpx;
            background: #ffffff;
            box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(81,161,255,0.10);
            .u-tabs__wrapper__nav {
                .u-tabs__wrapper__nav__item {
                    padding-left: 15rpx;
                    padding-right: 15rpx;
                    height: 100rpx !important;
                    line-height: 100rpx;
                    width: 33.3%;
                    box-sizing: border-box;
                    .u-tabs__wrapper__nav__item__text {
                        font-size: 30rpx;
                        font-weight: 700;
                        letter-spacing: 1.2rpx;
                    }
                }
                .u-tabs__wrapper__nav__line {
                    bottom: 15rpx;
                }
            }
        }
    }
    .main {
        width: calc(100% - 60rpx);
        margin: 30rpx 30rpx 0rpx;

        .orders-tab {
            width: calc(100% - 60rpx);
            background: #ffffff;
            border-radius: 40rpx;
            padding: 40rpx 30rpx 10rpx;

            .every-list {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0rpx auto 30rpx;
                height: 32rpx;
                font-size: 24rpx;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;

                text:nth-child(1){
                    font-weight: 600;
                    text-align: left;
                    color: #aaaaaa;
                }
                text:nth-child(2){
                    font-weight: 400;
                    text-align: right;
                    color: #333333;
                }
            }
            .trace_button {
                width: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin: 40rpx 0rpx 30rpx;
                height: 48rpx;

                view {
                    width: 140rpx;
                    height: 48rpx;
                    background: #ffffff;
                    border: 2rpx solid #51a1ff;
                    border-radius: 10rpx;
                    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(81,161,255,0.30);
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #51a1ff;
                    letter-spacing: 0.96rpx;
                    text-align: center;
                    line-height: 48rpx;
                }
            } 
        }
        // .noDetermineClass {
        //     height: 500rpx;
        // }
        // .determineClass {
        //     height: 400rpx;
        // }
        .goods-tab {
            width: 100%;
            background: #ffffff;
            border-radius: 40rpx;
            padding: 40rpx 0rpx 0rpx;
            margin-bottom: 30rpx;
            .every-list {
                // height: 375rpx;
                width: 100%;
                margin-bottom: 35rpx;
                .list-detail {
                    // height: 372rpx;
                    width: calc(100% - 60rpx);
                    padding: 0rpx 30rpx;
                    display: flex;
                    justify-content: space-between;
                    // margin-bottom: 30rpx;
                    .every-side {
                        width: calc((100% - 50rpx) / 2);
                        // height: 100%;
                        .side-layer {
                            width: 100%;
                            margin-bottom: 30rpx;
                            height: 32rpx;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            font-size: 24rpx;
                            font-weight: 400;
                            view:nth-child(1) {
                                color: #aaaaaa;
                                text-align: left;
                                width: 42%;
                                font-weight: 600;
                            }
                            view:nth-child(2) {
                                color: #333333;
                                text-align: right;
                                width: 58%;
                            }
                        }
                    }
                }
                .division-line {
                    width: 100%;
                    height: 0rpx;
                    border: 1rpx solid #f0f0f0;
                }
            }
        }
        .transport-tab {
            width: calc(100% - 60rpx);
            // height: 914rpx;
            background: #ffffff;
            border-radius: 40rpx;
            padding: 40rpx 20rpx 20rpx;
            margin-bottom: 30rpx;
            font-size: 24rpx;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            .item-route {
                width: 100%;
                display: flex;
                align-items: center;
                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                font-weight: 700;
                font-size: 32rpx;
                color: #333333;
                margin-bottom: 40rpx;
                .route-start {
                    width: calc((100% - 202rpx) / 2);
                    // height: 42rpx;
                    margin-right: 80rpx;
                    text-align: right;
                }
                .route-icon {
                    width: 48rpx;
                    height: 48rpx;
                    image{
                        width: 48rpx;
                        height: 48rpx;  
                    }
                }
                .route-end {
                    width: calc((100% - 202rpx) / 2);
                    // height: 42rpx;
                    margin-left: 80rpx;
                    text-align: left;
                }
            }
            .item-special {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-bottom: 30rpx;
                .special-every {
                    width: calc((100% - 62rpx) / 2);
                    height: 32rpx;
                    text:nth-child(1) {
                        font-weight: 600;
                        float: left;
                        color: #aaaaaa;
                    }
                    text:nth-child(2) {
                        float: right;
                        color: #333333;
                    }
                }
                .item-left {
                    color: #aaaaaa;
                    font-weight: 600;
                }
                .item-right {
                    color: #333333;
                    width: 400rpx;
                    text-align: right;
                }
            }
            .item-special:nth-child(11) {
                margin-bottom: 0rpx;
            }
        }
    }
}
</style>